<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>团购首页</title>
    <link rel="stylesheet" href="./css/index.css">
    
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="h_top">
            <!-- logo -->
            <img src="./images/index/LOGO.png" alt="LOGO">
            <!-- 搜索框 -->
            <div class="inp">
                <input type="text" placeholder="请输入商品名称">
            </div>

        <!-- 地区 -->
            <div class="sel">
                <select name="" id="">
                    <option value="广州市">广州市</option>
                    <option value="深圳市">深圳市</option>
                    <option value="上海市">上海市</option>
                </select>
                <!-- 下拉框的三角形 -->
                <i></i>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="h_bt">
            <ul>
                <li><img src="./images/index/轮播图.png" alt=""></li>
                <li><img src="./images/index/轮播图.png" alt=""></li>
                <li><img src="./images/index/轮播图.png" alt=""></li>
            </ul>
            <!-- 轮播图进度条 -->
            <div class="bar">
                <div></div>
            </div>
        </div>
    </header>
    <!-- 内容 -->
    <main>
        <!-- 优惠团购 -->
        <div class="m_gp">
            <div>
                <img src="./images/index/团购.png" alt="">
                <p>优惠团购</p>
            </div>
            <div>
                <a href="#">更多</a>
                <img src="./images/index/箭头.png" alt="">
            </div>
        </div>
        <!-- 优惠团购图片链接 -->
        <div class="m_gp1">
            <div>
                <a href="#"><img src="./images/index/图层5.png" alt=""></a>
                <a href="#"><img src="./images/index/图层7.png" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="./images/index/图层6.png" alt=""></a>
                <a href="#"><img src="./images/index/图层8.png" alt=""></a>
            </div>
        </div>

        <!-- 猜你喜欢 -->
        <div class="m_hob">
            <div>
                <img src="./images/index/形状5.png" alt="">
                <p>猜你喜欢</p>
            </div>
            <div>
                <a href="#">更多</a>
                <img src="./images/index/箭头.png" alt="">
            </div>
        </div>
        <!-- 猜你喜欢-店铺信息一 -->
        <div class="m_hob1">
            <a href="./详情.html">
                <img src="./images/index/图层3.png" alt="">
            </a>
            <div class="hob1_a">
                <div>
                    <a href="#">万岁寿司(正佳店)</a>
                    <span>&lt;100m</span>
                </div>
                <div>
                    <span>[100店通用]双人套餐</span>
                </div>
                <div>
                    <span>&yen;88.00</span>
                    <span>已售1000</span>
                </div>
            </div>
        <!-- 店铺信息二 -->
    
        </div>
        <!-- 猜你喜欢-店铺信息二 -->
        <div class="m_hob1">
            <a href="#">
                <img src="./images/index/图层4.png" alt="">
            </a>
            <div class="hob1_a">
                <div>
                    <a href="#">周黑鸭(正佳店)</a>
                    <span>&lt;100m</span>
                </div>
                <div>
                    <span>[100店通用]双人套餐</span>
                </div>
                <div>
                    <span>&yen;88.00</span>
                    <span>已售1000</span>
                </div>
            </div>
        <!-- 店铺信息二 -->
    
        </div>
         <!-- 猜你喜欢-店铺信息三 -->
         <div class="m_hob1">
            <a href="#">
                <img src="./images/index/图层4.png" alt="">
            </a>
            <div class="hob1_a">
                <div>
                    <a href="#">周黑鸭(正佳店)</a>
                    <span>&lt;100m</span>
                </div>
                <div>
                    <span>[100店通用]双人套餐</span>
                </div>
                <div>
                    <span>&yen;88.00</span>
                    <span>已售1000</span>
                </div>
            </div>
        <!-- 店铺信息二 -->
    
        </div>
    </main>
    <!-- 尾部导航栏 -->
    <nav>
        <div class="f_nav">
            <div>
                <a href="#">
                    <img src="./images/index/导航栏1.png" alt="">
                </a>
                <a href="">首页</a>
            </div>
            <div>
                <a href="./分类.html">
                    <img src="./images/index/导航栏2.png" alt="">
                </a>
                <a href="./分类.html">分类</a>
            </div>
            <div>
                <a href="./发现.html">
                    <img src="./images/index/导航栏3.png" alt="">
                </a>
                <a href="/发现.html">发现</a>
            </div>
            <div>
                <a href="./我的.html">
                    <img src="./images/index/导航栏4.png" alt="">
                </a>
                <a href="./我的.html">我的</a>
            </div>
        </div>
    </nav>
</body>
</html>